<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/common/include/page.jsp"%>
<c:set value="${requestScope.response.data.pageInfoUtil }" var="pageInfoUtil"/>
<c:set value="${requestScope.response.data.list }" var="list"/>
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>商品列表 - 美妆产品销售系统</title>
		<%@ include file="/common/include/head_title.jsp"%>
	</head>
	<body>
		<jsp:include page="/IndexHeadServlet">
			<jsp:param value="header" name="method"/>
		</jsp:include>
		<section class="page-content-wrapper">
			<div class="container">
				<div class="row">
					<div class="content-full pt-50 pb-55 fix">
						<div class="col-md-12">
							<!--NAV PILL-->
							<div class="shop-tab-pill">
								<div class="nav-menu-grid">
									<ul class="nav nav-pills">
										<li class="active"><a data-toggle="pill" href="#grid"><i
												class="icon_grid-2x2"></i></a></li>
										<li class=""><a data-toggle="pill" href="#list"><i
												class="icon_menu"></i></a></li>
									</ul>
								</div>
								<div class="show-more text-center">
									<h6>第${pageInfoUtil.currentPage }/${pageInfoUtil.totalPage }页 ${pageInfoUtil.totalRecord} 条商品</h6>
									<ul>
										<li><a href="${rootPath }/IndexHeadServlet?method=productList&categoryId=${requestScope.categoryId}&keyword=${requestScope.keyword}&orderby=${requestScope.orderby }&currentPage=1"> << </a> </li>
										<li><a href="${rootPath }/IndexHeadServlet?method=productList&categoryId=${requestScope.categoryId}&keyword=${requestScope.keyword}&orderby=${requestScope.orderby }&currentPage=${pageInfoUtil.prePage }"> < </a> </li>
										<li><a href="${rootPath }/IndexHeadServlet?method=productList&categoryId=${requestScope.categoryId}&keyword=${requestScope.keyword}&orderby=${requestScope.orderby }&currentPage=${pageInfoUtil.nextPage }"> > </a> </li>
										<li><a href="${rootPath }/IndexHeadServlet?method=productList&categoryId=${requestScope.categoryId}&keyword=${requestScope.keyword}&orderby=${requestScope.orderby }&currentPage=${pageInfoUtil.totalPage }"> >> </a> </li>
									</ul>
								</div>
								<div class="sorting text-right">
									<form id="sortForm" action="${rootPath }/IndexHeadServlet?method=productList&categoryId=${requestScope.categoryId}&keyword=${requestScope.keyword}" method="post">
										<select name="orderby" onchange="$('#sortForm').submit()">
											<option value="">默认排序</option>
											<option value="saleNumdesc" ${requestScope.orderby == 'saleNumdesc' ? 'selected' : '' }>销量降序</option>
											<option value="priceasc" ${requestScope.orderby == 'priceasc' ? 'selected' : '' }>价格升序</option>
											<option value="pricedesc" ${requestScope.orderby == 'pricedesc' ? 'selected' : '' }>价格降序</option>
										</select>
									</form>
								</div>
							</div>
							<!-- NAV PILL -->
						</div>
						<!-- Left Side Start -->
						<div class="col-md-12">
							<div class="tab-content">
								<div id="grid" class="shop-left pt-35 tab-pane fade active in">
									<div class="shop-tab-area">
										<div class="row">
											<c:forEach items="${list }" var="listTemp" varStatus="stat">
												<!-- Single Product Start -->
												<div class="col-md-4 col-sm-6">
													<div class="single-product style-two mb-50">
														<div class="single-img">
															<a href="${rootPath }/IndexHeadServlet?method=productInfo&id=${listTemp.id}" target="_blank">
																<c:choose>
																	<c:when test="${listTemp.listImg != null && listTemp.listImg != '' }">
																		<a href="${websiteFileUrl}${listTemp.listImg }" target="_blank">
																			<img alt="" src="${websiteFileUrl}${listTemp.listImg }" width="160" height="160">
																		</a>
																	</c:when>
																	<c:otherwise>
																		<img alt="" src="${rootPath }/img/no_pic.png" width="160" height="160">
																	</c:otherwise>
																</c:choose>
															</a>
															<span class="pro-level">${listTemp.category.name }</span>
															<div class="hover-content text-center">
																<ul>
																	<!-- <li><a href="#" class="icon_refresh"></a></li> -->
																	<li><a href="#" class="icon_cart_alt "></a></li>
																	<!-- <li><a href="#" class="icon_heart_alt"></a></li> -->
																	<!-- <li><a title="Quick View" href="#"
																		data-toggle="modal" data-target="#productModal"
																		class="icon_search"></a></li> -->
																</ul>
															</div>
														</div>
														<div class="product-details mt-20">
															<h4>
																<a href="${rootPath }/IndexHeadServlet?method=productInfo&id=${listTemp.id}" target="_blank">${listTemp.name }</a>
																<span>${listTemp.brief }</span>
															</h4>
															<!-- <div class="rating-box">
																<i class="fa fa-star"></i>
																<i class="fa fa-star"></i>
																<i class="fa fa-star"></i>
																<i class="fa fa-star"></i>
																<i class="fa fa-star"></i>
															</div> -->
															<div class="price-box">
																<!-- <span class="old-price">$40.00</span> -->
																<span class="new-price">${listTemp.price }元</span>
															</div>
														</div>
													</div>
												</div>
												<!-- Single Product End -->
											</c:forEach>
										</div>
									</div>
								</div>
								<div id="list" class="shop-right pt-35 pb-55 tab-pane fade">
									<div class="row">
										<c:forEach items="${list }" var="listTemp" varStatus="stat">
											<!-- Single product -->
											<div class="col-md-12">
												<div class="blog-single mb-50">
													<div class="blog-img">
														<c:choose>
															<c:when test="${listTemp.listImg != null && listTemp.listImg != '' }">
																<a href="${websiteFileUrl}${listTemp.listImg }" target="_blank">
																	<img alt="" src="${websiteFileUrl}${listTemp.listImg }" width="160" height="160">
																</a>
															</c:when>
															<c:otherwise>
																<img alt="" src="${rootPath }/img/no_pic.png" width="160" height="160">
															</c:otherwise>
														</c:choose>
														<a href="#" class="icon_link"></a>
														<span class="pro-level">${listTemp.category.name }</span>
													</div>
													<div class="product-contnt">
														<div class="product-info">
															<div class="pro-titel">
																<%-- <span>${listTemp.category.name }</span> --%>
																<h4>
																	<a href="single-product.html">${listTemp.name }</a>
																</h4>
															</div>
															<div class="pro-rate text-right">
																<div class="rating-box">
																	<i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
																		class="fa fa-star"></i> <i class="fa fa-star"></i> <i
																		class="fa fa-star"></i>
																</div>
																<div class="price-box">
																	<!-- <span class="old-price">$40.00</span> -->
																	<span class="new-price">${listTemp.price }</span>
																</div>
															</div>
														</div>
														<div class="pro-text">
															<p>${listTemp.brief }</p>
														</div>
														<div class="pro-social-cart">
															<ul>
																<li><a href="#" class="icon_refresh"></a></li>
																<li><a href="#" class="icon_heart_alt"></a></li>
																<li><a title="Quick View" href="#"
																	data-toggle="modal" data-target="#productModal"
																	class="icon_search"></a></li>
															</ul>
															<div class="pro-cart">
																<a href="#" onclick="return addCart('${listTemp.id}','1')">
																	添加购物车
																	<span class="icon-left" data-icon="$"></span>
																</a>
															</div>
														</div>
													</div>
												</div>
											</div>
											<!-- Single product -->
										</c:forEach>
									</div>
								</div>
							</div>
						</div>
						<!-- Left Side End -->
						<!-- Page Pagination Start -->
						<div class="col-md-12">
							<div class="page-pagination text-center">
								<ul>
									<li>第${pageInfoUtil.currentPage }/${pageInfoUtil.totalPage }页 ${pageInfoUtil.totalRecord} 条商品</li>
									<li><a href="${rootPath }/IndexHeadServlet?method=productList&categoryId=${requestScope.categoryId}&keyword=${requestScope.keyword}&orderby=${requestScope.orderby }&currentPage=1"> << </a> </li>
									<li><a href="${rootPath }/IndexHeadServlet?method=productList&categoryId=${requestScope.categoryId}&keyword=${requestScope.keyword}&orderby=${requestScope.orderby }&currentPage=${pageInfoUtil.prePage }"> < </a> </li>
									<li><a href="${rootPath }/IndexHeadServlet?method=productList&categoryId=${requestScope.categoryId}&keyword=${requestScope.keyword}&orderby=${requestScope.orderby }&currentPage=${pageInfoUtil.nextPage }"> > </a> </li>
									<li><a href="${rootPath }/IndexHeadServlet?method=productList&categoryId=${requestScope.categoryId}&keyword=${requestScope.keyword}&orderby=${requestScope.orderby }&currentPage=${pageInfoUtil.totalPage }"> >> </a> </li>
								</ul>
							</div>
						</div>
						<!-- Page Pagination End -->
					</div>
				</div>
			</div>
		</section>
		<%@ include file="/common/include/head_footer.jsp"%>
	</body>
</html>